servicios = function() {
	//private vars and methods
	var botones = [];
	var req;
	var hm;
	var closeTransition;
	var showTransition;
	var waitingAnchor = null;
	var loadingP;
	var loadingPtop;
	var showingClose = false;
	var loading = null;
	var sectionCache = {};
	var content = null;
	
	var formerClass = null;
	var ul;
	var main;
	var clos;
	
	var redirectIfUrlHasService = function() {
		var l = new String(document.location);
		var i = l.indexOf("./");
		if (i != -1) {
			var w = l.substr(i+10, l.length);					
			if (w) {				
				document.location = './test.html#'+w;				
			}
		}	
	}
	var onHistoryChange = function(anchor) {
		waitingAnchor = anchor;
		if (!loading) {
			changeService(waitingAnchor);
			return;
		}
		setTimeout(callOnHistoryChange, 100);
	}
	var callOnHistoryChange = function() {
		onHistoryChange(waitingAnchor);
	}
	var classNames = {
		automatizacion_de_procesos: 'automatas',
		intranet_extranet: 'intranet',
		webs_corporativas: 'corporativas',
		aplicaciones_web_e_interfaces: 'apps',
		consultoria_y_asesoramiento: 'consulting'		
	}
	
	
	var clickClose = function(e) {
		var e = new Event(e);
		e.stop();
		if (loading) return false;
		hm.addState("inicio");	
		hideClose();
		changeService("inicio");
	}
	var clickOnType = function(e) {
		
		var e = new Event(e);
		var h = e.target.href;
		e.stop();
		if (loading) return false;
		var section = h.substr(h.indexOf("#")+1, h.length);
		
		hm.addState(section);	
		changeService(section);
		
	}

	var changeService = function(section) {
		loading = classNames[section];
				
		formerClass = main.getProperty('class').split(" ")[1];		
		
		if (formerClass!="inicio") {			
			$ES("li#li_"+formerClass+" a", ul).removeClass("selected");
		}
		
		$ES("li#li_"+loading+" a", ul).addClass("selected");
			
		if (!loading) {
			 new Fx.Style(main, 'opacity', { duration: 400, onComplete: function() {
			 	main.removeClass(formerClass).addClass("inicio").empty();							
				new Fx.Style(main, 'opacity', { duration: 400, onComplete: function() {
						
					hideClose();
					loading = null;			
					
				}			
				}).start(1);

			 }
			 }).start(0);			
		}
		
		else {
			
			$ES("li#li_"+loading+" a", ul).removeEvent('click', clickOnType);			
			$ES("li#li_"+loading, ul).addClass("selected_"+loading);
			
			content = null;
			
			// seccion cacheada
			if (sectionCache[loading]) {
				content = sectionCache[loading];
				new Fx.Style(main, 'opacity', { duration: 400, onComplete: onContentFade}).start(0);				
			}
			// seccion se carga por AJAX
			else {
				var url = "/"+lang+"/throwpartial/services/"+section;				
				req = new Ajax(url, {method:"get", onComplete: onServiceLoad});
				req.request();					
				
				new Fx.Style(main, 'opacity', { duration: 400, onComplete:function() {
					new Fx.Styles(loadingP, {onComplete: waitForAjax, duration: 400, transition: Fx.Transitions.Cubic.easeOut}).start(
						{
						'opacity':[0,1],
						'top': [loadingPtop - 60, loadingPtop]
						}
					);
					
					}			
				}).start(0);
			}		
			
		}
		if (formerClass!="inicio") {
			$ES("li#li_"+formerClass+" a", ul).addEvent('click', clickOnType);
		}
							
	}
	
	var waitForAjax = function() {		
		if (content) {
			showNewContent(true);
			return;
		}
		setTimeout(waitForAjax, 100);
	}
	var onServiceLoad = function(data) {
		sectionCache[loading] = data;
		content = data;
	}
	var onContentFade = function() {
		showNewContent(false);
	}
	var showNewContent = function(hideP) {

		sectionCache[loading] = content;
		
		main.setHTML(content);
		main.removeClass(formerClass).addClass(loading);							
		new Fx.Style(main, 'opacity', { duration: 600, onComplete: function() {
			formerClass = loading;
			loading = false;			
			showClose();	
			}
		}).start(1);
		
		if (hideP) {
			new Fx.Styles(loadingP, {duration: 100,transition: Fx.Transitions.Cubic.easeIn}).start(
					{
					'opacity':[1,0],
					'top': [loadingPtop, loadingPtop-70]
					}
				);
		}
	}	
	var lookForLastSlash = function(str) {
		var i=0;
		str.split("").each(function(l,j) { if (l=="/") i=j; });
		return i;
	}
	
	var showClose = function() {
		if (!showingClose) {				
			showingClose = true;
			closeTransitionO.start({					
					width: 25
					
				});
		}
		
	}
	var hideClose = function() {
		if (showingClose) {
		
			showingClose = false;
			closeTransitionC.start({
				width: 0				
			});
		}
		
	}	
	
	// public methods and vars
	
	return {
		init: function() {	
			
			redirectIfUrlHasService();
						
			clos = $E("a.close");
			clos.addEvent('click', clickClose);
			closeTransitionC = new Fx.Styles(clos, {duration: 700, transition: new Fx.Transition(Fx.Transitions.Elastic, 0.5).easeIn});			
			closeTransitionO = new Fx.Styles(clos, {duration: 700, transition: new Fx.Transition(Fx.Transitions.Elastic, 0.5).easeOut});			
			
			clos.setStyles({				
				width: 0				
			});
			clos.setStyle('display','inline');	
			clos.setProperty("href", "#inicio");
			
			ul = $E("div.content ul.sub li.one ul.services");
			main = $E('div.service');
			
			
			loadingP = new Element("p", {
				'class' : 'loading'				
				}).setText(loading_data).injectInside($E("div.content ul.sub li.one")).setStyle('opacity', 0);
			loadingPtop = 150;
			
			
			hm = new HistoryManager();			
			hm.addEvent('onHistoryChange', onHistoryChange);
			if (location.href.indexOf("#")!=-1) {				
				changeService(location.href.split("#")[1]);
			}
			$$("ul.services li a").each(function(el) {
				
				el.addEvent('click', clickOnType);
				
				var lastSlashPos = lookForLastSlash(el.href);										
				if (lastSlashPos) 
					el.href = el.href.substr(0, lastSlashPos)+"#"+el.href.substr(lastSlashPos+1, el.href.length);				
				
			});
			
			
		}		
	}
	
		
}();

window.addEvent('domready', function(){
  servicios.init();
});